<template xmlns:el-col="http://www.w3.org/1999/html">
    <!-- 组件中只有一个弹窗 -->
<el-dialog
        v-model="taskAddWinDialogVisible"
        title="新增任务"
        width="50%"
        @close="handleClose"
>
    <template #default>

        <div>
            当前项目为:{{project.projectName}}
            <div v-if="parentTask">父级任务为：{{parentTask.taskTitle}}</div>
        </div>
        <el-form style="margin-top: 10px" :model="newTask" label-width="auto">
            <el-form-item  label="任务标题">
                <el-input  v-model="newTask.taskTitle"/>
            </el-form-item>

            <el-row>
                <el-col :span="8">
                    <el-form-item  label="任务工期">
                        <el-input-number min="1" v-model="newTask.taskDuration"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  label="开始时间">
                        <el-date-picker
                            v-model="newTask.startTime"
                            type="date"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  label="结束时间">
                        <el-date-picker
                            v-model="newTask.endTime"
                            type="date"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form-item  label="任务描述">
                <!-- 富文本编辑器的结构 -->
                <div style="border: 1px solid #ccc">
                    <Toolbar
                        style="border-bottom: 1px solid #ccc"
                        :editor="editorRef"
                        :defaultConfig="toolbarConfig"
                    />
                    <Editor
                        style="height: 500px; overflow-y: hidden;"
                        v-model="valueHtml"
                        :defaultConfig="editorConfig"
                        @onCreated="handleCreated"
                    />
                </div>
            </el-form-item>
            <el-form-item label="负责人">
                <el-select v-model="newTask.userId" style="width: 150px">
                    <el-option :value="0">暂不分配人员</el-option>
                    <el-option v-for="user in users" :value="user.userId" :label="user.username"/>
                </el-select>
            </el-form-item>
        </el-form>
    </template>
    <template #footer>
        <div class="dialog-footer">
            <el-button @click="cancelnewTask">取消</el-button>
            <el-button type="primary" @click="newTaskSubmit">
                提交
            </el-button>
        </div>
    </template>
</el-dialog>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, onMounted, ref, shallowRef, watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import loginRequest from "@/api/login.js";
import taskRequest from "@/api/task.js";
import {ElMessage} from "element-plus";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete','cancelTaskAdd'])
// 弹窗标记
let taskAddWinDialogVisible = ref(false);
let users = ref([]);
let props = defineProps(["project","parentTask","isShow"]);
// 编辑的项目对象
let newTask = ref({})
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML ，如果我们修改了内容，这里会跟着变化
const valueHtml = ref('');
// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig = { placeholder: '请输入任务描述...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

/**
 * 取消编辑按钮事件
 */
function cancelnewTask(){
    newTask = ref({});
    taskAddWinDialogVisible.value = false;
    emits("cancelTaskAdd")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
    emits("cancelTaskAdd")
}

/**
 * 编辑提交
 */
function newTaskSubmit(){
    newTask.value.taskDesc = valueHtml.value;
    newTask.value.taskParent = 1;
    newTask.value.taskParentId = 0;
    newTask.value.projectId = props.project.projectId;
    if(props.parentTask){
        newTask.value.taskParentId = props.parentTask.taskId;
    }
    taskRequest.save(newTask.value,res=>{
        if(res.code == 200){
            ElMessage({
                type:"success",
                message:"新增任务成功"
            });
            // 关闭弹窗
            cancelnewTask();
            valueHtml.value=""
            // 触发编辑完成的事件
            emits('addComplete',res.data);
        }else{
            ElMessage({
                type:"warning",
                message:"任务添加失败"
            });
        }
    })
}


/**
 * 侦听器 侦听 props.isShow
 */
watch(()=>props.isShow,()=>{
    taskAddWinDialogVisible.value = props.isShow;
});

onMounted(()=>{
    loginRequest.loadUsers(res=>{
        users.value = res.data;
    })
})
</script>
<style scoped>

</style>